<template>
	<view>
		<view class="van_top">
			<van-nav-bar title="修改收货地址" fixed left-arrow @click-left="onClickLeft" />
		</view>
		<view class="info">
			<view class="safe-area" :style="{ height: (statusBarHeight + 46) + 'px' }" style="width: 100%;"></view>
			<view class="content">
				<form @submit="onSubmit">
					<view class="card">
						<view class="title">
							<text class="txt1">地址信息</text>
							<view class="txt2">
								<van-checkbox :value="isChecked" checked-color="#FF1642" @change="(e) => isChecked = e.detail">默认收货地址</van-checkbox>
							</view>
						</view>
						<view class="form">

							<van-field :value="addressForm.region" required :name="addressForm.region" title-width="64px" size="large" label="省市区域" placeholder="点击请选择" readonly
								@click-input="show = true">
							</van-field>
							<van-field :value="addressForm.address" required :name="addressForm.address" title-width="64px" size="large" label="详细地址" placeholder="请输入详细地址"
								@change="e => addressForm.address = e.detail" :maxlength="40">
							</van-field>
							<van-field :value="addressForm.receiverName" required :name="addressForm.receiverName" size="large" title-width="64px" label="收货人"
								placeholder="请输入收货人姓名" @change="e => addressForm.receiverName = e.detail" :maxlength="40">
							</van-field>
							<van-field :value="addressForm.receiverPhone" type="number" required :name="addressForm.receiverPhone" size="large" title-width="64px" label="手机号"
								placeholder="请输入收货人手机号" @change="e => addressForm.receiverPhone = e.detail" :maxlength="40">
							</van-field>
						</view>
					</view>
					<view class="btn-box">
						<button class="delete-btn" type="info" @click="deleteAddress">
							删除地址
						</button>
						<button class="submit-btn" type="info" form-type="submit">
							保存地址
						</button>
					</view>
				</form>
			</view>
		</view>
		<van-popup :show="show" position="bottom" custom-style="height: 40%" @close="show = false" close-on-click-overlay safe-area-inset-bottom>
			<van-area :value="addressForm.regionId" :area-list="areaList" title="收货地址" @cancel="show = false" @confirm="regionConfirm"
				:swipe-duration="2000"/>
		</van-popup>
	</view>
</template>

<script>
	import { reqUpdateAddress, reqAddressDetail, reqDeleteAddress } from '@/apis/user'
	import app from '@/App.vue'
	import { areaList } from '@vant/area-data';
	import formRules from "@/utils/formRules.js"
	export default {
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				show: false,
				areaList: areaList,
				addressForm: {
					region: '',
					regionId: '410102',
					address: '',
					receiverName: '',
					receiverPhone: '',
					isDefault: '',
				},
				isChecked: false,
				rules: {
					regionId: [{ required: true, message: '请选择地址' }],
					address: [{ required: true, message: '请输入详细地址' }],
					receiverName: [{ required: true, message: '请输入收货人姓名' }],
					receiverPhone: [
						{ required: true, message: '请输入手机号' },
						{
							pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
							message: '手机号格式错误'
						},
					],
				},
				id: ''
			}
		},
		watch: {
			isChecked(val) {
				if (val) {
					this.addressForm.isDefault = '0'
				} else {
					this.addressForm.isDefault = '1'
				}
				console.log('val', val, this.addressForm.isDefault);
			}
		},
		onLoad(options) {
			if (options.id) {
				const { id } = options
				console.log('addressId', id);
				this.id = id
				this.getAddressDeatail()
			}
		},
		methods: {
			onClickLeft() {
				uni.navigateBack();
			},
			regionConfirm(e) {
				let values = e.detail.values;
				let nameArr = [];
				let codeArr = [];
				values.forEach(item => {
					nameArr.push(item.name);
					codeArr.push(item.code);
				})
				this.addressForm.region = nameArr.join('/')
				this.addressForm.regionId = codeArr.join(',')
				this.show = false;
			},
			onSubmit(e) {
				let { rules, addressForm } = this;
				formRules(rules, addressForm, async (status) => {
					if (status) {
						console.log('校验通过')
						const res = await reqUpdateAddress({
							...addressForm,
							id: this.id
						})
						if (res.code === 200) {
							uni.navigateBack();
						}
					}
				})
				console.log(this.pwdForm)
			},
			deleteAddress() {
				console.log('删除');
				uni.showModal({
					content: '请确认是否删除该收货地址?',
					success: async (res) => {
						if (res.confirm) {
							console.log('确定');
							//TODO
							const res = await reqDeleteAddress({ id: this.id })
							if (res.code === 200) {
								uni.navigateBack();
							}
						} else if (res.cancel) {
							console.log('取消');
							//TODO
						}
					}
				})
			},
			async getAddressDeatail() {
				const res = await reqAddressDetail({
					id: this.id
				})
				if (res.code === 200) {
					console.log('res', res);
					this.addressForm = res.data
					this.isChecked = this.addressForm.isDefault === '0' ? true : false
				}
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 24rpx;

		.card {
			margin-bottom: 48rpx;
			padding: 24rpx;
			height: 572rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			.title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 36rpx;
				font-size: 28rpx;
				color: #333333;

				.txt1 {
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}
			}

		}

		.btn-box {
			display: flex;
			justify-content: space-between;

			.submit-btn {
				width: 300rpx;
				height: 76rpx;
				line-height: 76rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				letter-spacing: 1px;
				background: #FF1642;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				margin-bottom: 24rpx;
			}

			.delete-btn {
				width: 300rpx;
				height: 76rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 2rpx solid #FF1642;
				font-weight: 500;
				font-size: 32rpx;
				color: #808080;
				line-height: 76rpx;
			}
		}
	}

	/deep/ .van-cell {
		margin-bottom: 36rpx;
	}
</style>